<template>
    <TabBar>
        <TabBarItem link="/home" activeColor="#00C872">
            <img slot="icon" src="~@/assets/images/tabbar/home.png" alt="" />
            <img slot="icon-active" src="~@/assets/images/tabbar/home_active.png" alt="">
            <p slot="title">首页</p>
        </TabBarItem>
        <TabBarItem link="/category" activeColor="#00C872">
            <img slot="icon" src="~@/assets/images/tabbar/category.png" alt=""/>
            <img slot="icon-active" src="~@/assets/images/tabbar/category_active.png" alt="">
            <p slot="title">分类</p>
        </TabBarItem>
        <TabBarItem link="/cart" activeColor="#00C872">
            <img slot="icon" src="~@/assets/images/tabbar/cart.png" alt=""/>
            <img slot="icon-active" src="~@/assets/images/tabbar/cart_active.png" alt="">
            <p slot="title">购物车</p>
        </TabBarItem>
        <TabBarItem link="/profile" activeColor="#00C872">
            <img slot="icon" src="~@/assets/images/tabbar/mine.png" alt=""/>
            <img slot="icon-active" src="~@/assets/images/tabbar/mine_active.png" alt="">
            <p slot="title">我的</p>
        </TabBarItem>
    </TabBar>
</template>

<script>
    import TabBar from "@/components/tabbar/TabBar";
    import TabBarItem from "@/components/tabbar/TabBarItem";

    export default {
        name: "MainTabBar",
        components: {
            TabBar,
            TabBarItem
        }
    }
</script>

<style scoped>

</style>
